<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Wheelzoom</title>
<style type="text/css">


body{
font-family: Arial; font-size: small;
background-color: #CCCCFF;
}

#outline {
margin:20px;
float:left;
width:512px;
height:440px;
-moz-outline-radius:20px; 
-moz-outline-style:solid;
-moz-outline-color:#9FB6CD; 
-moz-outline-width:10px;
}

#map{
width:512px; 
height:440px;
float:left;
}


#forehead{
background-color: #CCCCFF;
height:40px;
text-align:left;
margin:20px;
font-size:150%;
}


#novel{
margin:20px;
}

#AdSense{
margin:20px;
}

A:hover {
text-decoration:underline overline;
}

td
{vertical-align:top;
}

small{
color: grey;
}



</style>
<script 
src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshTWg_xmhpETXrjHUj59zHLsinrq_xSAmAGIHF6kJpo3mJn5WnKDztG7kw" type="text/javascript">
</script>
<script type="text/javascript" src="mktree.js"></script>
<link rel="stylesheet" href="mktree.css" type="text/css"/>
</head>



<body onunload="GUnload();">

<table><tr><td colspan="2">

<div id="forehead"><h3 id="head"> 
Esa's Google Maps API Experiments. Wheel Zoom.</h3>
</div></td></tr>
<tr><td>
<div id="outline">

<div id="map">Map coming...<noscript> <p>JavaScript must be enabled to get the map.</p> </noscript></div>


</div></td>

<td rowspan="2">
<div id="novel">


<h3>Scroll Wheel Zoom</h3>
<ul>
	<li>Came documented with v=2.78</li>
	<li>Syntax: map.enableScrollWheelZoom();</li>
	<li>Can be used with continuous zoom</li>
	<li><input type="checkbox" id="cont" onclick="cont(this.checked)"/>map.enableContinuousZoom();</li>

	<li>The animated red corners overflow outside map container</li>
	<li>Try scrollzooming close to an edge of the map</li>
	<li>The overflow can be hidden by css</li>
	<li><input type="checkbox" id="hideOverflow" onclick="hideOverflow(this.checked)"/>
	map.getContainer().style.overflow="hidden";</li>
	<li>Webpage scrolls along with the map zoom</li>

	<li>Preventing unwanted page scroll takes an event listener</li>
	<li><input type="checkbox" id="prevent" checked />Prevent page scroll when mouse on map

</ul>
<h3>JS-Kit Comments</h3>
<ul>
<li>Now with rating</li>
<li>Try it. Leave a comment. <a href="http://js-kit.com/comments" target="_blank">Get it.</a></li>
</ul>
<div class="js-kit-rating"></div>
<div class="js-kit-comments"></div>

<a href="http://koti.mbnet.fi/ojalesa/exam/index.html" target="_blank">Example index</a>

</div></td></tr>

<tr><td>

<div id="AdSense">


<script type="text/javascript"><!--
google_ad_client = "pub-3649938975494252";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="2676021345";
google_color_border = "CCCCFF";
google_color_bg = "CCCCFF";
google_color_link = "0000CC";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

</td></tr>
</table>

<script type="text/javascript">

//some of the globals
var map;


// map and its equipment
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(0,0),1);
map.addControl(new GMapTypeControl(1));
map.addControl(new GLargeMapControl());
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();


///continuous zoom
function cont(check) {
if (check) {
map.enableContinuousZoom();
} else {
map.disableContinuousZoom();
}}


///hide overflow
function hideOverflow(check) {
if (check) {
map.getContainer().style.overflow="hidden";
} else {
map.getContainer().style.overflow="visible";
}}


///prevent page scroll

function wheelevent(e)
{
if(document.getElementById("prevent").checked){
if (!e){
e = window.event
}
if (e.preventDefault){
e.preventDefault()
}
e.returnValue = false;
}}
GEvent.addDomListener(map.getContainer(), "DOMMouseScroll", wheelevent);
map.getContainer().onmousewheel = wheelevent; 



/// Automatic zoomOut from 'sorry..' tiles
function esasZoomOut(){
var paragraphs = map.getContainer().getElementsByTagName('p').length;
if(paragraphs > 6){
map.zoomOut();
}}
interval = setInterval("esasZoomOut()",500);

</script>


<script src="http://js-kit.com/ratings.js"></script>
<script src="http://js-kit.com/comments.js"></script>


      
</body>
</html>
